<template>

  <div>
    <div class="main" v-show="!isAdd">
      <div style="display: block;overflow: hidden;">
        <el-button type="primary" style="float: left" @click="toAdd">新增</el-button>
        <el-button type="primary" style="float: right;" @click="getList">搜索</el-button>
        <el-input style="float:right;display: inline-block;width: 200px" v-model="resourceName"
                  placeholder="请输入Banner名称"></el-input>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%;margin-top: 20px">
        <el-table-column
          prop="face"
          label="封面">
          <template slot-scope="scope">
            <img :src="scope.row.face" width="100" height="60" class="head_pic"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="resourceName"
          :label="resourceTypeName + '名称'">
        </el-table-column>
        <el-table-column
          prop="supplierName"
          label="所属供应商">
        </el-table-column>
        <el-table-column
          prop="teacherName"
          label="讲师">
        </el-table-column>
        <el-table-column
          prop="resourceCateName"
          label="所属分类">
        </el-table-column>
        <el-table-column
          prop="resourceName"
          label="学习人数">
        </el-table-column>
        <el-table-column
          prop="resourceName"
          label="完成人数">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间">
          <template slot-scope="scope">
<!--            {{timeGMTToString(d.createTime,'yyyy-MM-dd hh:mm')}}-->
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <span @click="toAdd(scope.row)">{{$t('action.edit')}}</span>
            <span @click="toDel(scope.row)">{{$t('action.delete')}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right;margin: 10px 0"
        background
        pageZize="10"
        @current-change="getList"
        layout="prev, pager, next"
        :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {timeGMTToString} from '@/utils/datetime'
  import {mapState} from "vuex"
  export default {
    name: "ResourceIndex",
    data() {
      return {
        isAdd: false,
        resourceName: '',
        resourceTypeName:"",
        count: 0,
        list: []
      }
    },
    watch:{
      "$route.query.resourceType"(newVal,oldVal){
        if(newVal !== oldVal){
          this.resourceTypeName = this.$store.state.app.enumData.resourceType_map[this.$route.query.resourceType].text;
          this.getList(this.$route.query.resourceType);
        }
      }
    },
    created() {
      this.getList(this.$route.query.resourceType || this.resourceType);
    },
    methods: {
      getList(current) {
        this.$api.resource.getResourceList({resourceName: this.resourceName + ':', pageIndex: 0, pageSize: 10}).then(
          res => {
            this.count = res.data.count;
            this.list = res.data.list;
          }
        )
      },
      toAdd(){
        this.isAdd = true;
      },
      close(){
        this.isAdd = false;
      },
      toDel(){

      }
    }
  }
</script>

<style scoped>

</style>
